<template>
  <div class="categoryDetails w">
    <el-empty
      v-if="Object.keys(info).length === 0"
      description="正在加载请稍等~~~"
    ></el-empty>
    <div v-else>
      <!-- 音乐的基本信息板块 -->
      <el-row type="flex" class="category_info">
        <el-col :span="6">
          <GlobalImageDeep
            :url="info.coverImgUrl"
            :imgWidth="250"
            :imgHeight="250"
          />
        </el-col>
        <el-col :span="18">
          <h2 style="color: #333">{{ info.name }}</h2>
          <!-- 作者得相关 -->
          <div class="category_info_author">
            <GlobalImageDeep
              :url="info.creator.avatarUrl"
              :imgWidth="60"
              :imgHeight="60"
            />
            <!--               @click="toSingerDetailsPage(info.creator.userId)" -->
            <el-link
              type="primary"
              @click="toUserDetailsPage(info.creator.userId)"
              >{{ info.creator.nickname }}</el-link
            >
            <i>{{ formatCreareTime(info.createTime) }}</i>
          </div>
          <!-- tag 的相关 -->
          <div class="category_info_tag">
            标签: &nbsp;
            <el-tag
              type="info"
              effect="plain"
              v-for="(item, index) in info.tags"
              :key="index"
              >{{ item }}</el-tag
            >
          </div>
          <!-- 歌单描述 -->
          <div class="category_info_description">
            介绍: &nbsp; {{ info.description }}
          </div>
          <!-- 榜单的操作按钮 -->
          <div class="category_info_button">
            <el-button type="success">
              <i class="iconfont icon-bofang"></i>
              播放全部
            </el-button>
            <el-button>
              <i class="iconfont icon-tianjiawenjian"></i>
              添加到
            </el-button>
            <el-button>
              <i class="iconfont el-icon-download"></i>
              下载
            </el-button>
            <el-button @click="screenToComment">
              <i class="iconfont el-icon-chat-line-round"></i>
              评论
              <span style="margin-left: 5px">{{ info.commentCount }}</span>
            </el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 歌单的所有音乐和 歌单的相关歌单 -->
      <div class="main">
        <SongsList
          v-if="info.trackIds.length !== 0"
          :id="info.id"
          :total="info.trackIds.length"
        />
        <!-- <SongsAd /> -->
        <!-- 评论 -->
        <GlobalComment
          :id="info.id"
          v-if="Object.keys(info).length !== 0"
          class="categoryDetailsComment"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  getDetails,
  getTrackIdsDetails,
  getCategoryAllSongs, // 这个是用于分页的
} from "../../../../api/categoryDetailsApi";
import moment from "moment";

import SongsList from "./components/songsList.vue";
import SongsAd from "./components/songsAd";
export default {
  name: "categoryDetails",
  components: { SongsList, SongsAd },
  data() {
    return {
      id: 0,
      info: {},
    };
  },
  created() {
    // console.log(this.);
    this.id = this.$route.params.id;
    this.getCategoryDetailsMethods();
  },
  methods: {
    async getCategoryDetailsMethods() {
      try {
        const result = await getDetails(this.id);
        if (result.code === 200) {
          this.info = result.playlist;
        }
      } catch (error) {}
    },

    // 格式化创建时间
    formatCreareTime(time) {
      return moment().format("YYYY-MM-DD") + "  创建";
    },
    // 点击评论两个字的时候
    screenToComment() {
      this.$utils.scrollTop(
        document.querySelector(".categoryDetailsComment").offsetTop,
        200
      );
    },
    toUserDetailsPage(uid) {
      this.$router.push(`/userDetails/${uid}`);
    },
  },
  computed: {},
  watch: {
    // this.$router.params.id: {
    //   handler(newValue, oldValue) {
    //     this.id = oldValue;
    //   },
    //   immediate: true,
    // },
  },
};
</script>

<style lang="less" scoped>
.categoryDetails {
  padding: 30px 0;
  font-size: 14px;
  .category_info {
    /deep/ .el-image img {
      border-radius: 8px;
    }
    .category_info_author {
      display: flex;
      height: 60px;
      margin: 10px 0;
      align-items: center;
      /deep/ .el-image img {
        border-radius: 50% !important;
      }
      a {
        margin: 0 10px;
      }
      i {
        color: #999999;
        font-size: 12px;
      }
    }
    .category_info_tag {
      display: flex;
      height: 50px;
      align-items: center;

      /deep/ .el-tag {
        height: 22px;
        line-height: 22px;
        margin-right: 5px;
      }
    }
    .category_info_button {
      margin: 10px 0;
    }
  }
  // .main {
  //   // display: flex;
  // }
}
</style>
